<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣电影</title>
    <!--  引入css 文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./pages/movie/style/header.css">
    <link rel="stylesheet" href="./pages/movie/style/content.css">
    <link rel="stylesheet" href="./pages/movie/style/aside.css">
    <link rel="stylesheet" href="css/adaptive.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/theme.css">
    <link rel="shortcut icon" href="images/icon/favicon.ico" type="image/x-icon">
</head>
<body>
    <div class="nav-top">
        <ul>
            <li><a href="javascript:void(0)">豆瓣</a></li>
            <li><a href="./pages/read/index.html">读书</a></li>
            <li><a href="./index.html">电影</a></li>
            <li><a href="">音乐</a></li>
            <li><a href="">同城</a></li>
            <li><a href="">小组</a></li>
            <li><a href="">阅读</a></li>
            <li><a href="./pages/pin/index.html">豆品</a></li>
        </ul>
    </div>
    <div class="header">
        <div class="header-content">
            <div class="header-search">
                <div class="logo">
                    <img src="./pages/movie/images/lg_movie@2x.png" alt="" width="125">
                </div>
                <div>
                    <form action="" class="flex">
                        <input class="header_input" type="text" placeholder="搜索电影、电视剧、综艺、影人">
                        <div class="search_button flex-center">
                            <a href="">
                                <svg t="1703579757116" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4614" width="20" height="20"><path d="M469.333333 768c-166.4 0-298.666667-132.266667-298.666666-298.666667s132.266667-298.666667 298.666666-298.666666 298.666667 132.266667 298.666667 298.666666-132.266667 298.666667-298.666667 298.666667z m0-85.333333c119.466667 0 213.333333-93.866667 213.333334-213.333334s-93.866667-213.333333-213.333334-213.333333-213.333333 93.866667-213.333333 213.333333 93.866667 213.333333 213.333333 213.333334z m251.733334 0l119.466666 119.466666-59.733333 59.733334-119.466667-119.466667 59.733334-59.733333z" fill="#e6e6e6" p-id="4615"></path></svg>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
            <div class="header-nav">
                <div>
                    <ul>
                        <li><a href="" class="hover_text_bg">腾讯&购票</a></li>
                        <li><a href="" class="hover_text_bg">选电影</a></li>
                        <li><a href="" class="hover_text_bg">电视剧</a></li>
                        <li><a href="" class="hover_text_bg">排行榜</a></li>
                        <li><a href="" class="hover_text_bg">影评</a></li>
                        <li><a href="" class="hover_text_bg">2023年度榜单</a></li>
                        <li><a href="" class="hover_text_bg">2022书影音报告</a></li>
                    </ul>
                </div>
            </div>
            <div class="annual_2023">
                <div>
                    <img src="./pages/movie/images/annual_2023.png" alt="" width="210">
                </div>
            </div>
        </div>
    </div>
    <div class="content">
       <div class="main">
            <div class="main-header">
                <div class="desc-title">
                    <span style="font-size: 1rem;">正在热映</span>
                    <span><a href="" class="hover_text_bg">全部正在热映»</a></span>
                    <span ><a href="" class="hover_text_bg">即将上映»</a></span>
                </div>
                <div class="graphics-toggle flex-center">
                    <div>
                        <span>5</span>
                        <span> / </span>
                        <span>7</span>
                    </div>
                    <div class="button flex-center pl-1">
                        <span class="flex-center"><svg t="1703582471372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5780" width="12" height="12"><path d="M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z" fill="#fff" p-id="5781"></path></svg></span>
                        <span class="flex-center"><svg t="1703582489312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6779" width="12" height="12"><path d="M761.055557 532.128047c0.512619-0.992555 1.343475-1.823411 1.792447-2.848649 8.800538-18.304636 5.919204-40.703346-9.664077-55.424808L399.935923 139.743798c-19.264507-18.208305-49.631179-17.344765-67.872168 1.888778-18.208305 19.264507-17.375729 49.631179 1.888778 67.872168l316.960409 299.839269L335.199677 813.631716c-19.071845 18.399247-19.648112 48.767639-1.247144 67.872168 9.407768 9.791372 21.984142 14.688778 34.560516 14.688778 12.000108 0 24.000215-4.479398 33.311652-13.439914l350.048434-337.375729c0.672598-0.672598 0.927187-1.599785 1.599785-2.303346 0.512619-0.479935 1.056202-0.832576 1.567101-1.343475C757.759656 538.879828 759.199462 535.391265 761.055557 532.128047z" fill="#fff" p-id="6780"></path></svg></span>
                    </div>
                </div>
            </div>
            <div class="divider"></div>
            <div class="main-article">
                <div class="graphics ">
                    <div class="graphics-card">
                        <div>
                            <div>
                                <a href="">
                                <img src="./pages/movie/images/p2901703469.webp" alt="" height="161"></a>
                            </div>
                            <p><a href="">三大队</a></p>
                            <p >
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="../images/icon/_star.svg" alt=""></span>
                              <span class="star-text">7.9</span>
                            </p>
                        </div>
                        <button class="select-button">选座购票</button>
                    </div>
                    <div class="graphics-card">
                        <div>
                            <div>
                                <a href="">
                                <img src="./pages/movie/images/p2901534046.webp" alt="" height="161"></a>
                            </div>
                            <p><a href="">狗神</a></p>
                            <p >
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/_star.svg" alt=""></span>
                              <span class="star-text">8.2</span>
                            </p>
                        </div>
                        <button class="select-button">选座购票</button>
                    </div>
    
                    <div class="graphics-card">
                        <div>
                            <div>
                                <a href="">
                                <img src="./pages/movie/images/p2901397955.webp" alt="" height="161"></a>
                            </div>
                            <p><a href="">海王2</a></p>
                            <p >
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/_star.svg" alt=""></span>
                              <span><img src="./images/icon/_star.svg" alt=""></span>
                              <span class="star-text">6.4</span>
                            </p>
                        </div>
                        <button class="select-button">选座购票</button>
                    </div>
                    <div class="graphics-card">
                        <div>
                            <div>
                                <a href="">
                                <img src="./pages/movie/images/p2901526491.webp" alt=""  height="161"></a>
                            </div>
                            <p><a href="">瞒天过海</a></p>
                            <p >
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/_star.svg" alt=""></span>
                              <span><img src="./images/icon/_star.svg" alt=""></span>
                              <span class="star-text">7.4</span>
                            </p>
                        </div>
                        <button class="select-button">选座购票</button>
                    </div>
                    <div class="graphics-card">
                        <div>
                            <div>
                                <a href="">
                                <img src="./pages/movie/images/p2901235578.webp" alt="" height="161"></a>
                            </div>
                            <p><a href="">拿破仑</a></p>
                            <p >
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/star.svg" alt=""></span>
                              <span><img src="./images/icon/_star.svg" alt=""></span>
                              <span><img src="./images/icon/_star.svg" alt=""></span>
                              <span class="star-text">6.7</span>
                            </p>
                        </div>
                        <button class="select-button">选座购票</button>
                    </div>
                </div>
            </div>
            <div>
                <div class="main-header">
                    <div class="desc-title">
                        <span style="font-size: 1rem;">最近热门电影</span>
                        <span ><a href="" >热门</a></span>
                        <span class="lightcolor"><a href="" >豆瓣高分</a></span>
                        <span class="lightcolor"><a href="" >冷门佳片</a></span>
                        <span class="lightcolor"><a href="" >华语</a></span>
                        <span class="lightcolor"><a href="" >热门</a></span>
                        <span class="lightcolor"><a href="">欧美</a></span>
                        <span class="lightcolor"><a href="">韩国</a></span>
                        <span class="lightcolor"><a href="">欧美</a></span>
                        <span class="lightcolor"><a href="">日本</a></span>
                        <span class="lightcolor">最新</span>
                    </div>
                </div>
                <div class="main-article">
                    <div class="carouse">
                        <div>
                           <div class="graphics ">
                                <div class="graphics-card">
                                    <div>
                                        <div>
                                            <a href="">
                                            <img src="./pages/movie/images/p2901972551.jpg" alt="" height="163"></a>
                                        </div>
                                        <span class="hover_text_bg"><a href="">黑铁的鱼影</a></span>
                                        <span class="star-text">6.6</span>
                                    </div>
                                    
                                    </div>
                                    <div class="graphics-card">
                                        <div>
                                            <div>
                                                
                                                <a href="">
                                                <img src="./pages/movie/images/p2897460998.jpg" alt="" height="163"></a>
                                            </div>
                                            <span class="hover_text_bg">花月杀手</span>
                                            <span class="star-text">7.3</span>
                                        </div>
                                        
                                        </div>
                                        <div class="graphics-card">
                                            <div>
                                                <div>
                                                    <a href="">
                                                    <img src="./pages/movie/images/p2900726031.jpg" alt=""height="163"></a>
                                                </div>
                                                <span>恶棍</span>
                                                <span class="star-text">7.7</span>
                                            </div>
                                            
                                            </div>
                                            <div class="graphics-card">
                                                <div>
                                                    <div>
                                                        <a href="">
                                                        <img src="./pages/movie/images/p2884832763.jpg" alt="" height="163"></a>
                                                    </div>
                                                    <span class="hover_text_bg">藤枝梅安1</span>
                                                    <span class="star-text">7.7</span>
                                                </div>
                                                
                                                </div>
                                                <div class="graphics-card">
                                                    <div>
                                                        <div>
                                                            <a href="">
                                                            <img src="./pages/movie/images/p2888966002.jpg" alt=""  height="163"></a>
                                                        </div>
                                                        <span class="hover_text_bg">无神之地</span>
                                                        <span class="star-text">6.1</span>
                                                    </div>
                                                    
                                                    </div>
                                               
                                                <div class="graphics-card">
                                                    <div>
                                                        <div>
                                                            <a href="">
                                                            <img src="./pages/movie/images/p2899685080.jpg" alt="" height="163"></a>
                                                        </div>
                                                        <span class="hover_text_bg">绿叶</span>
                                                        <span class="star-text">5.3</span>
                                                    </div>
                                                    
                                                    </div>
                                                    <div class="graphics-card">
                                                        <div>
                                                            <div>
                                                                <a href="">
                                                                <img src="./pages/movie/images/p2896319483.jpg" alt=""  height="163"></a>
                                                            </div>
                                                            <span class="hover_text_bg">坚如磐石</span>
                                                            <span class="star-text">6.2</span>
                                                        </div>
                                                        
                                                        </div>
                                                        <div class="graphics-card">
                                                            <div>
                                                                <div>
                                                                    <a href="">
                                                                    <img src="./pages/movie/images/p2899786881.jpg" alt="" height="163"></a>
                                                                </div>
                                                                <span class="hover_text_bg">断网假期</span>
                                                                <span class="star-text">6.0</span>
                                                            </div>
                                                            
                                                            </div>
                                                            <div class="graphics-card">
                                                                <div>
                                                                    <div>
                                                                        <a href="">
                                                                        <img src="./pages/movie/images/p2899486451.jpg" alt="" height="163"></a>
                                                                    </div>
                                                                    <span class="hover_text_bg">河边的错误</span>
                                                                    <span class="star-text">7.3</span>
                                                                </div>
                                                                
                                                                </div>
                                                                <div class="graphics-card">
                                                                    <div>
                                                                        <div>
                                                                            <a href="">
                                                                            <img src="./pages/movie/images/p2896940977.jpg" alt="" width="108"></a>
                                                                        </div>
                                                                        <span class="hover_text_bg">坠落的审判</span>
                                                                        <span class="star-text">8.5</span>
                                                                    </div>
                                                                    
                                                                    </div>
                                                
                           </div>
                        </div>
                        
                    </div>
                    <div class="graphics-toggle flex-center graphics-toggle2 ">
                       
                        <div class="button flex-center">
                            <span class="flex-center"><svg t="1703582471372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5780" width="12" height="12"><path d="M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z" fill="#fff" p-id="5781"></path></svg></span>
                            <div class="flex-center dot-box">
                                <div class="dot"></div>
                                <div class="dot"></div>
                                <div class="dot"></div>
                            </div>
                            <span class="flex-center none-pd"><svg t="1703582489312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6779" width="12" height="12"><path d="M761.055557 532.128047c0.512619-0.992555 1.343475-1.823411 1.792447-2.848649 8.800538-18.304636 5.919204-40.703346-9.664077-55.424808L399.935923 139.743798c-19.264507-18.208305-49.631179-17.344765-67.872168 1.888778-18.208305 19.264507-17.375729 49.631179 1.888778 67.872168l316.960409 299.839269L335.199677 813.631716c-19.071845 18.399247-19.648112 48.767639-1.247144 67.872168 9.407768 9.791372 21.984142 14.688778 34.560516 14.688778 12.000108 0 24.000215-4.479398 33.311652-13.439914l350.048434-337.375729c0.672598-0.672598 0.927187-1.599785 1.599785-2.303346 0.512619-0.479935 1.056202-0.832576 1.567101-1.343475C757.759656 538.879828 759.199462 535.391265 761.055557 532.128047z" fill="#fff" p-id="6780"></path></svg></span>
                        </div>
                    </div>
                </div>
            </div>
           
       </div>
       <div class="aside_info">
           <div class="aside-header">
                <p>
                    <a href=""  class="hover_text_bg">评分豆瓣电影八问</a>
                </p>
           </div>
           <div class="desc-title aside-title">
                <p>一周口碑榜</p>
                <p class="hover_text_bg">更多榜单»</p>
           </div>
           <div class="divider"></div>
           <div class="aside-list">
                <div class="flex">
                    <span>
                        1
                    </span>
                    <p class="hover_text_bg"><a href="">泰勒·斯威夫特：时代巡回演唱会</a></p>
                </div>
                <h1 class="divider"></h1>
                <div>
                    <span>
                        2
                    </span>
                    <p class="hover_text_bg"><a href="">狗神</a></p>
                </div>
                <h1 class="divider"></h1>
                <div>
                    <span>
                        3
                    </span>
                    <p class="hover_text_bg"><a href="">不要太期待世界末日</a></p>
                </div>
                <h1 class="divider"></h1>
                <div>
                    <span>
                        4
                    </span>
                    <p class="hover_text_bg"><a href="">完美的日子</a></p>
                </div>
                <h1 class="divider"></h1>
                <div>
                    <span>
                        5
                    </span>
                    <p class="hover_text_bg"><a href="">惩罚</a></p>
                </div>
                <h1 class="divider"></h1>
                <div>
                    <span>
                        6
                    </span>
                    <p class="hover_text_bg"><a href="">三大队</a></p>
                </div>
                <h1 class="divider"></h1>
                <div>
                    <span>
                        7
                    </span>
                    <p class="hover_text_bg"><a href="">寺木帮</a></p>
                </div>
                <h1 class="divider"></h1>
                <div>
                    <span>
                        8
                    </span>
                    <p class="hover_text_bg"><a href="">杨尼克</a></p>
                </div>
                <h1 class="divider"></h1>
                <div>
                    <span>
                        9
                    </span>
                    <p class="hover_text_bg"><a href="">看不见的朋友</a></p>
                </div>
                <h1 class="divider"></h1>
                <div>
                    <span>
                        9
                    </span>
                    <p class="hover_text_bg"><a href="">小鸡快跑</a></p>
                </div>
           </div>
           <div>
                <div class="desc-title aside-title">
                    <p>热门片单</p>
                </div>
                <div class="divider"></div>
                <div class="hot" >
                    <p class="hover_text_bg"><a href="">画家 ·  艺术 · 传记相关</a></p>
                    <p class="lightcolor">34推荐</p>
                </div>
                <div class="divider"></div>
                <div class="hot" >
                    <p class="hover_text_bg"><a href="">【豆瓣高分纪录片/其它】(1/2)</a></p>
                    <p class="lightcolor">4310推荐</p>
                </div>
           </div>
           <br>
           <div>
                <div class="desc-title">
                    <p>
                       合作联系 
                    </p>

                </div>
                <div class="divider"></div>
                <div class="cooperation">
                    <p>
                        电影合作邮箱：movie@douban.com
                    </p>
                    <p><br></p>
                    <p>电视剧合作邮箱：TV@douban.com</p>
                </div>
           </div>
       </div>
    </div>
</body>
</html>